<template>
  <div class="main-tab">
    <x-header id="header" :left-options="{showBack: false}">发现</x-header>
    <div class="main-headerAndTab" v-if="pageReady">
      <scroller
        :scroll-bottom-offset="50"
        lock-x
        :use-pullup="true"
        :pullupConfig="{downContent:'↑',upContent:'',loadingContent:'请稍后',content:''}"
        @on-pullup-loading="pagePull"
        v-model="status">
        <div style="padding-bottom: 55px;">
          <div class="find-poster">
            <div class="poster-header" @click="goPoster" >
              <img class="icon" src="../../../static/img/find-1.png" />
              <div class="find-title">展示海报</div>
              <div class="more">查看更多</div>
              <img class="more-icon"  src="../../../static/img/right.png" />
            </div>
            <div class="poster-body">
              <div class="poster-item" v-for=" (item,index) in posterList" :key="index" @click="goPoster({id:item.id})" v-if="index < 3">
                <img class="img" :src="item.posterSrc" />
                <p class="theme">{{item.title}}</p>
              </div>
            </div>
          </div>
          <div class="find-article">
            <div class="article-header" >
              <img class="icon" src="../../../static/img/find-2.png" />
              <div class="find-title">资讯</div>
              <!--<div class="more">查看更多</div>-->
              <!--<img class="more-icon"  src="../../../static/img/right.png" />-->
            </div>
            <div class="article-body">
              <div class="item" v-for="item in articleList" @click="goArticle({id:item.id})">
                <div class="left">
                  <div class="find-title">{{item.title}}</div>
                  <div class="date">{{item.createTime}}</div>
                </div>
                <img :src="item.picture" class="img" />
              </div>
            </div>
          </div>
        </div>
      </scroller>
    </div>
    <b-tabbar :value="2" />
  </div>
</template>

<script>
import bTabbar from '@/components/Btabbar'
import { getArticleList } from '@/api/article'
import { getPosterList } from '@/api/user'
import { cookie } from 'vux'
import { interval} from "@/libs/util";

export default {
  name: 'find',
  components: {
    bTabbar,
  },
  data () {
    return {
      loginStatus: false,
      pageReady: false,
      posterList:[],
      articleList: [],
      cp:1,
      lp:1,
      status:{
        pullupStatus: ''
      }
    }
  },
  methods: {
    goPoster ({id}) {
      if (this.loginStatus) {
        if (!id) {
          this.$router.push('poster')
        } else {
          this.$router.push({
            name: 'poster',
            query: {
              id: id
            }
          })
        }
      } else {
        this.$vux.toast.text('请先登录')
        setTimeout(() => {
          this.$router.replace('registrationLogin')
        }, 1500)
      }
    },
    goArticle ({id}) {
      if (this.loginStatus) {
        if (!id) {
          this.$router.push('article')
        } else {
          this.$router.push({
            name: 'article',
            query: {
              id: id
            }
          })
        }
      } else {
        this.$vux.toast.text('请先登录')
        setTimeout(() => {
          this.$router.replace('registrationLogin')
        }, 1500)
      }
    },
    pagePull () {
      if (this.cp < this.lp) {
        getArticleList(this.cp + 1).then( data => {
          this.cp = data.current_page
          this.lp = data.last_page
          this.articleList = [...this.articleList, ...data.data]
          sessionStorage.setItem('find_articleList', JSON.stringify({articleList: this.articleList, cp: this.cp, lp: this.lp}))
        })
        setTimeout(() => {
          this.$set(this.status,'pullupStatus','default')
        }, 500)
      } else {
        this.$vux.toast.text('暂无更多')
        setTimeout(() => {
          this.$set(this.status,'pullupStatus','default')
        }, 200)
      }
    }
  },
  mounted () {
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
    if (this.globalData.cid) {
      this.loginStatus = true
    }
    const posterList = sessionStorage.getItem('find_posterList')
    if (!posterList) {
      getPosterList().then( data => {
        this.posterList = data
        this.pageReady = true
        sessionStorage.setItem('find_posterList', JSON.stringify(this.posterList))
      })
    } else {
      this.posterList = JSON.parse(posterList)
      this.pageReady = true
    }
    const articleList = sessionStorage.getItem('find_articleList')
    if (!articleList) {
      getArticleList().then( data => {
        this.articleList = data.data
        this.cp = data.current_page
        this.lp = data.last_page
        this.pageReady = true
        sessionStorage.setItem('find_articleList', JSON.stringify({articleList: this.articleList, cp: this.cp, lp: this.lp}))
      })
    } else {
      Object.assign(this, JSON.parse(articleList))
      this.pageReady = true
    }
  }
}
</script>

<style scoped>

</style>
